<template>
  <div style="margin: 15px auto; padding: 10px 5px; text-align: center">
    <v-timeline :dense="widthLevel === 1">
      <v-timeline-item v-for="item in articles" :key="item.articleId">
        <span slot="opposite">{{item.time}}</span>
        <v-card class="elevation-2 pa-3" @click="$router.push('/article/'+item.articleId)">
          <div class="text-sm-subtitle-1 text-md-h6 text-lg-h5 text-center mb-2">{{item.title}}</div>

          <!-- 基础信息 -->
          <div class="hidden-md-and-up"><v-icon class="mr-1">mdi-calendar-blank-multiple</v-icon>{{item.time}}</div>

          <!-- 文章简介 -->
          <div class="my-article-description">
            {{item.description}}
          </div>

        </v-card>
      </v-timeline-item>
    </v-timeline>

  </div>
</template>

<script>
import Http from "@/api/http";

export default {
  name: "Archive",


  data: ()=>{
    return {
      articles: [],

    }
  },


  props: {
    widthLevel: Number
  },


  created() {
    this.$emit("childloading", true);


    Http.get("/article/archive").then(data=>{
      if(data.code == 1){
        this.articles = data.result;
        this.$emit("childloading", false);
      }else{
        this.$emit("updateError",data.message);
        this.$emit("childloading", false);
      }
    }).catch(fail=>{
      this.$emit("updateError","服务端发生错误");
      console.error(fail);
      this.$emit("childloading", false);
    })
  }
}
</script>

<style scoped>
  .my-article-description {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
</style>